<template>
  <div id="shop">
    <van-row>
      <van-col span="24">
        <van-nav-bar title="品牌商详情" left-arrow @click-left="onClickLeft" />
      </van-col>
      <van-col span="24" class="picUrl">
        <img :src="ShopList.picUrl" alt="" />
        <p>{{ ShopList.name }}</p>
      </van-col>
      <van-col span="24" class="desc">
        <p>{{ ShopList.desc }}</p>
      </van-col>
      <van-col span="24" class="ShopGoodsList">
        <van-col span="12" v-for="(item, index) in ShopGoodsList" :key="index">
          <div>
            <img :src="item.picUrl" alt="" />
            <p class="name">{{ item.name }}</p>
            <p class="retailPrice">￥{{ item.retailPrice }}</p>
          </div>
        </van-col>
      </van-col>
    </van-row>
  </div>
</template>
<script>
export default {
  name,
  data() {
    return {
      ShopList: {},
      ShopGoodsList: {}
    }
  },
  mounted() {
    this.onGetShopList()
    this.onGetShopGoodsList()
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    onGetShopList() {
      this.$get('brand/detail', { id: this.$route.query.id })
        .then(result => {
          console.log(result)
          this.ShopList = result.data.data
        })
        .catch(err => {})
    },
    onGetShopGoodsList() {
      let data = {
        page: 1,
        limit: 10,
        brandId: this.$route.query.id
      }
      this.$get('goods/list', data)
        .then(result => {
          console.log(result.data.data.list)
          this.ShopGoodsList = result.data.data.list
        })
        .catch(err => {})
    }
  }
}
</script>
<style lang="less" scoped>
.picUrl {
  width: 100%;
  position: relative;
  img {
    width: 100%;
  }
  p {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 0.21rem;
    transform: translate(-50%, -50%); //文字居中图片
    color: aliceblue;
    border-bottom: 1px solid aliceblue;
  }
}
.desc {
  padding: 0.2rem;
  color: #909191;
  text-align: center;
  font-size: 0.16rem;
}
.ShopGoodsList {
  background-color: #f4f4f4;
  .van-col {
    padding: 0.03rem;
    div {
      background-color: #fff;
      width: 100%;
      height: 2rem;
      text-align: center;
      img {
        width: 80%;
      }
      .name {
        font-size: 0.14rem;
      }
      .retailPrice {
        color: #c57b7a;
      }
    }
  }
}
</style>
